<template>
    <view class="wai">
        <view class="wai-top">
            <view class="prices">
                <image class="image" src="@/static/prices.png" mode=""></image>
                <view>已支付</view>
            </view>
            <view class="daojishi">待核销</view>
        </view>
        <view class="city">
            <view class="city-top">
                <view class="top1">
                    <image class="top1-img" :src="orderData.shop.logo" mode=""></image>
                    <view>{{ orderData.shop.name }}</view>
                </view>
                <view class="top2">{{ orderData.shop.distance_text }}</view>
            </view>
            <view class="city-bottom">
                <view style="flex: 1">店铺地址：{{ orderData.shop.address }}</view>
                <image @click="ngn" class="btm2" src="@/static/weizi.png" mode=""></image>
            </view>
        </view>
        <view class="center">
            <view @click="shopDetas2" class="box-list1" v-for="it in orderData.items" :key="it.id">
                <image class="list1-left" :src="it.goods_image" mode=""></image>
                <view class="list1-right">
                    <view class="right1">{{ it.goods_title }}</view>
                    <view class="right2">{{ it.goods_sku_text }}</view>
                    <view class="right3">
                        <view class="box-zuo">
                            <view class="zuo1">￥{{ it.goods_price }}</view>
                        </view>
                        <view class="box-you">×{{ it.goods_num }}</view>
                    </view>
                </view>
            </view>
            <view class="zongjia zongjia1">
                <view>商品总价</view>
                <view>￥{{ orderData.pay_fee }}</view>
            </view>
            <view class="zongjia zongjia2">
                <view>抵扣券</view>
                <view class="dikou">-￥{{ orderData.voucher }}</view>
            </view>
            <view class="zongjia">
                <view>合计总价</view>
                <view>￥{{ orderData.remain_pay_fee }}</view>
            </view>
        </view>
        <!-- 下单时间 -->
        <view class="placeOrder">
            <view class="placeOrder-box">
                <view>下单时间：</view>
                <view class="time-order">{{ orderData.createtime }}</view>
            </view>
            <view class="placeOrder-box">
                <view>订单编号：</view>
                <view class="time-order">{{ orderData.order_sn }}</view>
            </view>

            <view class="placeOrder-box">
                <view>支付方式：</view>
                <view class="time-order">在线支付</view>
            </view>
            <view class="placeOrder-box boxx">
                <view>支付时间：</view>
                <view class="time-order">{{ orderData.paid_time }}</view>
            </view>
        </view>
        <!-- 底部 -->
        <view class="footer" @click="wite">
            <view class="leftend">核销码</view>
        </view>
    </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { utils } from '@/utils/utils.js';
import { getOrderDetails } from '@/api/index.js';
import { ref } from 'vue';
const id = ref(''); //其他页面传来的参数，用来获取订单详情
const orderData = ref({}); //订单详情数据
onLoad((options) => {
    if (options.id) {
        id.value = options.id;
        console.log(id.value);
    }
    getOrder();
});
// 获取订单详情
const getOrder = async () => {
    const ret = await getOrderDetails(id.value);
    if (ret.code == 1) {
        orderData.value = ret.data;
    } else {
        utils();
    }
    console.log(222, ret.data);
};
// 点击进入核销码
const wite = () => {
    uni.navigateTo({
        url: `/pages/sub/writeOff1?content=${orderData.value.order_sn}`
    });
};
//点击店铺商品跳转商品详情
const shopDetas2 = () => {
    uni.navigateTo({
        url: '/pages/sub/shopDetails'
    });
};
const ngn = () => {
    // console.log(Number(orderData.value.shop.lng));
    uni.openLocation({
        latitude: Number(orderData.value.shop.lat),
        longitude: Number(orderData.value.shop.lng),
        success: function () {
            console.log('success');
        }
    });
};
</script>

<style lang="scss" scoped>
.wai {
    // 地址
    .city {
        .city-bottom {
            .btm2 {
                width: 46rpx;
                height: 46rpx;
            }
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #999999;
            font-size: 28rpx;
        }
        .city-top {
            .top1 {
                .top1-img {
                    width: 60rpx;
                    height: 60rpx;
                    margin-right: 16rpx;
                }
                display: flex;
                align-items: center;
            }
            .top2 {
                color: #f8bb4f;
                font-size: 24rpx;
            }
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 42rpx;
        }
        padding: 18rpx 32rpx 32rpx 32rpx;
        background-color: #fff;
        border-radius: 30rpx;
        margin-bottom: 28rpx;
    }
    //底部
    .footer {
        .leftend {
            color: #ffffff;
            padding: 10rpx 34rpx;
            border-radius: 50rpx;
            background: linear-gradient(85deg, #ff9a01 0%, #ffb901 100%);
        }
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 100rpx;
        background-color: #fff;
        padding: 18rpx 48rpx 18rpx 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    // 下单时间
    .placeOrder {
        .placeOrder-box {
            .time-order {
                color: #666666;
            }
            display: flex;
            align-items: center;
            margin-bottom: 44rpx;
        }
        .boxx {
            margin-bottom: 0;
        }
        padding: 36rpx 0 30rpx 24rpx;
        background-color: #fff;
        border-radius: 30rpx;
        margin-top: 24rpx;
    }
    // 订单详情·
    .center {
        .zongjia2 {
            .dikou {
                color: #f6260a;
                font-size: 28rpx;
            }
            margin-top: 14rpx;
            margin-bottom: 28rpx;
        }
        .zongjia1 {
            margin-top: 34rpx;
        }
        .zongjia {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .box-list1 {
            .list1-right {
                .box-you {
                    color: #999999;
                    font-size: 28rpx;
                    font-weight: 700;
                }
                .right3 {
                    .box-zuo {
                        .zuo1 {
                            font-weight: 700;
                        }
                        display: flex;
                        align-items: center;
                        position: relative;
                    }
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 46rpx;
                }
                .right2 {
                    color: #999999;
                    font-size: 24rpx;
                    margin-top: 12rpx;
                }
                .right1 {
                    font-size: 30rpx;
                }
                width: 518rpx;
            }
            .list1-left {
                width: 160rpx;
                height: 160rpx;
                margin-right: 16rpx;
            }
            display: flex;
            height: 208rpx;
            padding: 20rpx 14rpx 14rpx 24rpx;
        }
        background-color: #fff;
        border-radius: 30rpx;
        padding: 22rpx 14rpx 20rpx 24rpx;
    }
    // 顶部
    .wai-top {
        .daojishi {
            display: flex;
            height: 50rpx;
            align-items: center;
            font-size: 24rpx;
            color: #f8bb4f;
        }
        .prices {
            .image {
                width: 50rpx;
                height: 50rpx;
                margin-right: 18rpx;
            }
            display: flex;
            height: 50rpx;
            align-items: center;
            color: #f8bb4f;
        }
        display: flex;
        justify-content: space-between;
        padding-top: 70rpx;
        height: 170rpx;
        // background-color: #ffe8bf;
        background: linear-gradient(to bottom, #ffe8bf, #faf3e6);
        padding-left: 44rpx;
        padding-right: 16rpx;
    }
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-bottom: 200rpx;
}
</style>
